<!-- 修改发票信息 弹窗 -->
<template>
	<view>
		<uni-popup ref="invoiceInfoPopup" type="center" :mask-click="false">
			<view class="address-modal">
				<view class="modal-header">申请开票</view>
				<uni-icons type="closeempty" size="20" class="modal-icon" @click="closeinvoiceInfo"></uni-icons>
				<view class="modal-content">
					<view class="modify-invoice-container">
						<view class="header">
							<text>申请开票</text>
							<view class="action-link" @click="goToMaintainInvoice">前往维护发票信息</view>
						</view>
						<view class="invoice-type">
							<radio-group @change="radioChange">
								<label class="invoice-label">
									<radio activeBackgroundColor="#D92400" activeBorderColor="#D92400" :checked="true" :value="1">
										增值税普通发票</radio>
								</label>
								<label>
									<radio activeBackgroundColor="#D92400" activeBorderColor="#D92400" :value="2">
										增值税专用发票</radio>
								</label>
							</radio-group>
						</view>
						<view class="invoice-content">
							<view class="invoiceList" v-show="invoiceType===1">
								<view :class="['invoice-item', invoiceIndex===index?'invoice-itemSelected' :'' ]"
									v-for="(item,index) in invoiceData" :key="index" @click="invoiceLi(1,item,index)">
									<view class="invoice-item-content">
										<text>{{ item.title }}</text>
										<view class="invoice-receipt">
											<text class="sub-text">{{ item.type===2?'个人类型发票':'单位类型发票' }}</text>
											<view v-if="item.is_default" class="default-tag">默认</view>
										</view>
									</view>
								</view>
							</view>
							<view class="invoiceList" v-show="invoiceType===2">
								<view :class="['invoice-item', unitIndex===index?'invoice-itemSelected' :'' ]"
									v-for="(item,index) in unitInvoice" :key="index" @click="invoiceLi(2,item,index)">
									<view class="invoice-item-content">
										<text>{{ item.title }}</text>
										<view class="invoice-receipt">
											<text class="sub-text">税号：{{ item.number }}</text>
											<view v-if="item.is_default" class="default-tag">默认</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 电子发票邮箱 -->
						<view class="email-section">
							<view class="section-title">电子发票寄送邮箱</view>
							<input class="email-input" @input="validateEmail(email)" type="email" v-model="email"
								placeholder="请输入邮箱" />
							<text class="email_text" v-show="!isemail">请输入正确邮箱</text>
						</view>
						<view class="remark-section">
							<text class="section-title">备注</text>
							<textarea v-model="invoiceInfo.remark" class="textarea"
								placeholder="如仅需添加开票注意事项，可联系您的专属顾问，或拨打客服热线0530-2216166转商务处理"></textarea>
						</view>
						<!-- <view class="footer">
							<button type="warn" class="confirm-btn" @click="submitModifyInvoiceInfo">确定</button>
							<button type="default" class="confirm-btn" @click="closeinvoiceInfo">取消</button>
						</view> -->
						<view class="button-group">
							<button class="btn cancel" @click="closeinvoiceInfo">取消</button>
							<button class="btn confirm" @click="submitModifyInvoiceInfo">确定</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "invoiceInfoPopup",
		data() {
			return {
				invoiceInfo: {
					invoice: {
					}, // 发票信息
					remark: '' // 发票备注
				},
				email: '', // 邮箱
				invoiceIndex: -1, // 个人选中
				unitIndex: -1, // 单位选中
				invoiceType: 1, // 未开票
				uid: '', // 用户id
				invoiceCloud: null, // 连接发票云对象
				unitInvoice: null, //单位发票列表
				invoiceData: null, //个人发票列表
				isemail: true, // 验证邮箱是否正确
			};
		},
		props: {
			// unitInvoice: {
			// 	type: Array, // 数字类型 单位发票列表
			// 	required: false, // 必填项
			// 	default: null // 默认值
			// },
			// invoiceData: {
			// 	type: Array, // 数字类型
			// 	required: false, // 必填项
			// 	default: null // 默认值 个人发票列表
			// },
		},
		mounted() {
			this.invoiceCloud = uniCloud.importObject('invoice');
			this.uid = uni.getStorageSync('login-userinfo')._id
			console.log('11111111');
			this.getInvoiceList();
		},
		methods: {
			async getInvoiceList() {
				console.log('获取发票时：uid', this.uid)
				try {
					const res = await this.invoiceCloud.getList({
						page: 1,
						size: 50,
						// type: 1 // 可选，筛选类型 1:公司 2:个人
					}, this.uid)
					if (res.success) {
						const invoiceList = res.data.list
						this.unitInvoice = invoiceList.filter(item => item.type === 1); // 单位发票数据
						this.invoiceData = invoiceList.filter(item => item.type === 2); // 个人发票数据
						console.log('单位：', this.unitInvoice)
						console.log('个人：', this.invoiceData)

						// console.log('单位发票：',this.invoiceData)
						// console.log('个人发票：',this.unitInvoice)
						// this.invoiceData = []; // 个人发票数据
						// this.unitInvoice = []; // 单位发票数据
					}
				} catch (e) {
					uni.showToast({
						title: e.message || '获取列表失败',
						icon: 'none'
					})
				}
			},
			invoiceLi(type, item, index) {
				console.log(item);
				if (type === 1) {
					this.invoiceIndex = index
				} else {
					this.unitIndex = index
				}
				this.invoiceInfo.invoice = item;

			},
			radioChange(evt) {
				console.log(evt.detail.value)
				this.invoiceType = evt.detail.value
				if (this.invoiceType == 1) {
					this.invoiceData.filter((item, index) => { // 个人
						if (item.is_default === true) {
							this.invoiceIndex = index;
							this.invoiceInfo.invoice = item;
						}
					});

				} else if (this.invoiceType == 2) {
					this.unitInvoice.filter((item, index) => { // 单位
						if (item.is_default === true) {
							this.unitIndex = index;
							this.invoiceInfo.invoice = item;
						}
					});
				} else {
					this.unitIndex = -1;
					this.invoiceInfo.invoice = null;
				}
				console.log('个人：',this.invoiceIndex);
				console.log('单位：',this.unitIndex);
			},
			// 打开修改发票弹窗
			openinvoiceInfo() {
				this.$refs.invoiceInfoPopup.open();
			},
			// 关闭修改发票弹窗
			closeinvoiceInfo() {
				this.invoiceIndex = -1;
				this.unitIndex = -1;
				this.invoiceType = 1;
				this.$refs.invoiceInfoPopup.close();
			},
			goToMaintainInvoice() {
				// 这里可以添加跳转到维护发票信息页面的逻辑，比如使用uni.navigateTo等方法
				console.log('前往维护发票信息');
			},
			submitModifyInvoiceInfo() {
				if (this.isemail && this.email=="") {
					uni.showToast({
						title: '请填写邮箱地址',
						icon: 'none'
					})
					return;
				}
				if (!this.isemail) {
					uni.showToast({
						title: '请填写正确邮箱',
						icon: 'none'
					})
					return;
				}
				
				// 这里可以添加将修改后的发票信息发送到后端的逻辑，目前只是简单打印
				this.invoiceInfo.email = this.email;
				console.log('提交修改后的发票信息：', this.invoiceInfo);
				// this.invoiceInfo.remark // 发票信息
				this.closeinvoiceInfo();
				this.$emit('invoiceInfo', this.invoiceInfo);
			},
			validateEmail(email) {
				console.log(email)
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				console.log(typeof email === 'string' && emailRegex.test(email))
				this.isemail = typeof email === 'string' && emailRegex.test(email);
			}

		}
	}
</script>

<style scoped>
	.address-modal {
		width: 1100px;
		height: 500px;
		background: #fff;
		border-radius: 16px;
		/* padding: 30px 20px; */
		box-sizing: border-box;
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
	}

	.modal-header {
		width: 100%;
		height: 40px;
		font-size: 14px;
		font-weight: 600;
		background-color: #F5F5F5;
		border-radius: 8px;
		padding: 0 16px;
		box-sizing: border-box;
		line-height: 40px;
		/* margin-bottom: 25px; */
		/* text-align: center; */
	}

	.modal-content {
		background-color: white;
		width: 100%;
		height: 560px;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 8px;
		overflow-y: auto;
	}


	/* 按钮 */

	uni-button[type='primary'] {
		background-color: #D92400;
	}



	.modify-invoice-container {
		width: 100%;
	}

	.header {
		display: flex;
		height: 40px;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		background-color: #F7F7F7;
		padding: 0 20px;
	}

	.header text {
		font-size: 14px;
	}


	.action-link {
		color: #dc3545;
		font-size: 14px;
		cursor: pointer;
	}

	.invoice-type {
		margin-bottom: 20px;
	}

	.invoice-label {
		margin-right: 20px;
	}

	.invoice-type /deep/ .uni-radio-input {
		width: 16px;
		height: 16px;
	}

	.invoice-content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		/* width: 100%; */
		/* margin-bottom: 20px; */
	}

	.invoiceList {
		display: flex;
		flex-wrap: wrap;
	}

	.invoice-item {
		width: 480px;
		margin-right: 40px;
		height: 86px;
		border: 1px solid #ddd;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.invoice-itemSelected {
		border: 1px dashed #dc3545;
	}

	.invoice-item-content {
		display: flex;
		flex-direction: column;
	}

	.invoice-receipt {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.default-tag {
		background-color: #ffc107;
		color: #fff;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 2px;
	}

	.sub-text {
		color: #666;
		font-size: 14px;
	}

	.remark-section {
		margin-bottom: 20px;
	}

	.section-title {
		display: block;
		font-size: 14px;
		color: #333;
		margin-bottom: 10px;
	}

	.textarea {
		width: 1000px;
		height: 80px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
		font-size: 14px;
		box-sizing: content-box;
	}

	/* 按钮 */

	/* .footer {
		display: flex;
		justify-content: flex-end;
		width: 500px;
		margin: 0 auto;
	}

	.confirm-btn {
		width: 140px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
	} */

	/* .cancel-btn {
		width: 140px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
	} */


	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30px auto;
		margin-bottom: 0;
		width: 290px;
	}

	.btn {
		width: 25%;
		height: 30px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30px;
		font-size: 14px;
		/* margin-left: 60px; */
	}

	.btn.cancel {
		background: #f5f5f5;
		color: #333;
		/* margin-left: 120px; */
		/* margin-right: 20px; */
	}

	.btn.confirm {
		background: #E91F1B;
		color: #fff;
		margin-left: 0;
	}
	
	.email-section {
		margin-bottom: 15px;
	}
	
	.email-label {
		display: block;
		margin-bottom: 5px;
	}
	
	.email-input {
		width: 400px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}
	
	.email_text {
		color: #D9001B;
	}
</style>